<template>
	<div class="first">
<!-- 		<div class="homepage">
		
		<el-carousel :height="img_height+'px'" :autoplay='false' class="carousel" indicator-position="outside" >
			<el-carousel-item v-for="(item, index) in img_src" :key="index" >
				<h3><img @load="img_load()" ref='img' :src="item" alt="" style="width: 100%;"></h3>
				
			</el-carousel-item>
		</el-carousel>
		
		<searchbar class="searchbar"></searchbar>
		
	</div> -->
	<carousel></carousel>
	
	<top_pick></top_pick>
	
	<selected_album></selected_album>
	
	<high_end></high_end>
	</div>
	
	
	
</template>

<script>
	// import {
	// 	get_carousel
	// } from '../../../API/carousel.js';
	// import searchbar from '../../components/searchbar.vue';
	import carousel from '../../components/carousel.vue';
	import top_pick from '../../components/Top_picks.vue';
	import selected_album from '../../components/selected_album.vue';
	import high_end from '../../components/high_end_PLUS.vue';
	export default {
		data() {
			return {
				// img_src: [],
				// img_height:Number,
			}
		},
		components:{
			// searchbar,
			carousel,
			top_pick,
			selected_album,
			high_end,
		},
		methods: {
			// img_load(){
			// 	this.$nextTick(() => {
			// 		// console.log(this.$refs.img[0].height)
			// 		this.img_height = this.$refs.img[0].height;
			// 	})
			// }
		},
		created() {
			// get_carousel().then(res => {
			// 	// console.log(res);
			// 	this.img_src = res.data.data.map(el => {
			// 		return el.url;
			// 	})

			// })
			
		},
		mounted() {
			// window.addEventListener('resize', () => {
			// 	this.$nextTick(() => {
			// 		this.img_height = this.$refs.img[0].height;
			// 	})
			// })
		}
	}
</script>

<style lang="scss" scoped>

		// width: 100%;
		// width: 100vw;
		// .carousel {
		// 	// background-color: red;
		// 	// width: 100%;

		// 	img {
		// 		width: 100%;
		// 	}
		// }
	

	// .el-carousel__item {
	// 	// height: 396px;
	// }

	// .el-carousel__item img {
	// 	color: #475669;
	// 	font-size: 18px;
	// 	opacity: 0.75;
	// 	line-height: 300px;
	// 	margin: 0;
	// 	// min-width: 100%;
	// 	width: 100%;
	// }

	// .el-carousel__item:nth-child(2n) {
	// 	background-color: #99a9bf;
	// }

	// .el-carousel__item:nth-child(2n+1) {
	// 	background-color: #d3dce6;
	// }

	// ::v-deep .el-carousel__container {
	// 	height: 359px;
	// }
	// ::v-deep .el-carousel__container{
	// 	img{
	// 		width: 100%;
	// 		// height: 100%;
	// 	}
	// }
	// .homepage{
	// 	position: relative;
	// 	.searchbar{
	// 		position: absolute;
	// 		top: 50%;
	// 		left: 50%;
	// 		transform: translate(-50%,-50%);
	// 		z-index: 2;
	// 	}
	// }
	
</style>
